/**
 * Author: Shen Yanqiu
 * Date: 2017-12-07
 * Time: 19:33
 *
 */
import React from 'react';
import { Form, Input, Button, message, DatePicker, Upload, Icon, Modal, Row, Col} from 'antd';
import styles from './AddPage.less';

const FormItem = Form.Item;
const RangePicker = DatePicker.RangePicker;

class AddPage extends React.Component {
  state = {
    previewVisible: false,
    previewImage: '',
    fileList: [],
  };

  handleCancel = () => this.setState({previewVisible: false})

  handlePreview = (file) => {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  }

  handleChange = ({fileList}) => {
    this.setState({fileList})
    console.log(fileList);
  }

  render() {
    const {getFieldDecorator, getFieldsError, getFieldError, isFieldTouched, validateFields} = this.props.form;
    const {onSubmit} = this.props;
    const rangeConfig = {
      rules: [{type: 'array', message: 'Please select time!'}],
    };
    const formItemLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 4},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 20},
      },
    };
    const UpdateImageLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 4},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 20},
      },
    };

    function handleSubmit(e) {
      e.preventDefault();
      validateFields((err, values) => {
        // 提交数据
        onSubmit(values);
        // console.log('Received values of form: ', values);
      });
    }

    // 图片上传
    const {previewVisible, previewImage, fileList} = this.state;
    const uploadButton = (
      <div>
        <Icon type="plus"/>
        <div className="ant-upload-text">Upload</div>
      </div>
    );
    // 附件
    const uploadfilesprops = {
      name: 'file',
      action: '//jsonplaceholder.typicode.com/posts/',
      headers: {
        authorization: 'authorization-text',
      },
      onChange(info) {
        if (info.file.status !== 'uploading') {
          console.log(info.file, info.fileList);
        }
        if (info.file.status === 'done') {
          message.success(`${info.file.name} file uploaded successfully`);
        } else if (info.file.status === 'error') {
          message.error(`${info.file.name} file upload failed.`);
        }
      },
    };
    return (
      <div>
        <h3>发起调查</h3>
        <Row>
          <Col span={10}>
            <Form layout="horizontal" hideRequiredMark onSubmit={handleSubmit}>
              <FormItem label="调查名称" {...formItemLayout}>
                {getFieldDecorator('name', {
                  rules: [{ required: true, message: '输入不为空!' }],
                })(<Input type="textarea" placeholder="请输入调查名称（30个字）" rows="2"/>)}
              </FormItem>

              <FormItem label="添加封面图" {...UpdateImageLayout}>
                {/* 上传图片 */}
                <div className="clearfix">
                  <Upload
                    action="//jsonplaceholder.typicode.com/posts/"
                    listType="picture-card"
                    fileList={fileList}
                    onPreview={this.handlePreview}
                    onChange={this.handleChange}
                  >
                    {fileList.length >= 4 ? null : uploadButton}
                  </Upload>
                  <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
                    <img alt="example" style={{width: '100%'}} src={previewImage}/>
                  </Modal>
                </div>
              </FormItem>

              <Row>
                <Col span={4} />
                <Col span={20}>
                  <Button type="primary" htmlType="submit">提交</Button>
                </Col>
              </Row>
            </Form>
          </Col>
        </Row>
      </div>
    );
  }
}
export default Form.create()(AddPage);
